<template>
  111
  <img :src="img" alt="">
  <test title="hhh" @orange="get"  ref="awp"/>
  <div>
    <nav >
      <ul>
        <li><router-link :to="{name:'a'}" exactActiveClass="red" >a</router-link></li>
        <li><router-link :to="{name:'b'}" activeClass="red">b</router-link> </li>
        <li><span style="color: aqua;"  @click="router.push({name:'b'})">点我到B</span></li>
       <router-view></router-view>
      </ul>
    </nav>
    <div>
      <p>动态组件</p>
      <component :is="comId"></component>
      <van-button type="danger">二王墨迹</van-button>
    </div>
  </div>
  <p v-for="v of 100" :key="v">占位填充用</p>
<van-back-top></van-back-top>
  <van-number-keyboard safe-area-inset-bottom />
  <div id="test"></div>
</template>

<script setup lang="ts">
// Toast  vant按需加载无法引入,所以挂载在这里
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

import { getCurrentInstance, onMounted, reactive, shallowRef,markRaw,ref } from 'vue';
import test from './components/test.vue'
import A from './components/a.vue'
import B from './components/b.vue'
import imgs from './assets/images/vue.svg'
import router from './router';

// 获取assets静态资源
const getAssetsFile = (url: string) => {
   return new URL(`./assets/images/${url}`, import.meta.url).href
}
const img = getAssetsFile('vue.svg')

console.log(img);





onMounted(()=>{
  const getCI = getCurrentInstance() as any
  const getValue = getCI?.ctx.$refs.awp
 // console.log(getCI);
 showToast('提示内容');
  
})
const get = (e:string)=>{
console.log(e);
  
}
//动态组件

const comId = shallowRef(A)
const tab = reactive([{
    name: "A组件",
    comName: markRaw(A)
}, {
    name: "B组件",
    comName: markRaw(B)
}])
</script>



<style scoped lang="scss">
.red{
  color: red;
  border: 1px solid #ccc;
  .add{
    background-color: aquamarine;
  }
}

#test{
  width: 200px;
  height: 500px;
  background-color: red;
}
</style>
